<template>
    <div class="dashboard-container">
        <h2>简历数据分析</h2>

        <!-- 数据统计卡片 -->
        <div class="stat-cards">
            <el-card shadow="hover">
                <div class="card-content">
                    <div class="card-title">总简历数</div>
                    <div class="card-value">{{ totalResumes }}</div>
                </div>
            </el-card>
            <el-card shadow="hover">
                <div class="card-content">
                    <div class="card-title">待处理简历</div>
                    <div class="card-value">{{ pendingResumes }}</div>
                </div>
            </el-card>
            <el-card shadow="hover">
                <div class="card-content">
                    <div class="card-title">已约面简历</div>
                    <div class="card-value">{{ interviewResumes }}</div>
                </div>
            </el-card>
            <el-card shadow="hover">
                <div class="card-content">
                    <div class="card-title">不合适简历</div>
                    <div class="card-value">{{ rejectedResumes }}</div>
                </div>
            </el-card>
        </div>

        <!-- 图表区域 -->
        <div class="chart-area">
            <el-card shadow="hover" class="chart-card">
                <div class="chart-title">简历状态分布</div>
                <div id="statusChart" class="chart-container"></div>
            </el-card>

            <el-card shadow="hover" class="chart-card">
                <div class="chart-title">职位申请趋势</div>
                <div id="trendChart" class="chart-container"></div>
            </el-card>

            <el-card shadow="hover" class="chart-card">
                <div class="chart-title">学历分布</div>
                <div id="educationChart" class="chart-container"></div>
            </el-card>

            <el-card shadow="hover" class="chart-card">
                <div class="chart-title">工作经验分布</div>
                <div id="experienceChart" class="chart-container"></div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
// 导入消息工具
import message from "@/utils/message.js";

const router = useRouter();

// 统计数据
const totalResumes = ref(0);
const pendingResumes = ref(0);
const interviewResumes = ref(0);
const rejectedResumes = ref(0);

// 图表实例
const charts = ref({
    statusChart: null,
    trendChart: null,
    educationChart: null,
    experienceChart: null,
});

// 初始化图表
const initCharts = () => {
    // 状态分布饼图
    charts.value.statusChart = echarts.init(document.getElementById("statusChart"));
    charts.value.statusChart.setOption({
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            right: 10,
            top: "center",
        },
        series: [
            {
                name: "简历状态",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                },
                label: {
                    show: false,
                    position: "center",
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: "18",
                        fontWeight: "bold",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    { value: 1048, name: "待处理" },
                    { value: 735, name: "已查看" },
                    { value: 580, name: "已约面" },
                    { value: 484, name: "不合适" },
                ],
            },
        ],
    });

    // 申请趋势折线图
    charts.value.trendChart = echarts.init(document.getElementById("trendChart"));
    charts.value.trendChart.setOption({
        tooltip: {
            trigger: "axis",
        },
        legend: {
            data: ["前端", "UI", "Java"],
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "前端",
                type: "line",
                stack: "Total",
                data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
                name: "UI",
                type: "line",
                stack: "Total",
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: "Java",
                type: "line",
                stack: "Total",
                data: [150, 232, 201, 154, 190, 330, 410],
            },
        ],
    });

    // 学历分布柱状图
    charts.value.educationChart = echarts.init(document.getElementById("educationChart"));
    charts.value.educationChart.setOption({
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        xAxis: {
            type: "category",
            data: ["大专", "本科", "硕士", "博士"],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [120, 200, 150, 80],
                type: "bar",
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                },
            },
        ],
    });

    // 经验分布柱状图
    charts.value.experienceChart = echarts.init(document.getElementById("experienceChart"));
    charts.value.experienceChart.setOption({
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        xAxis: {
            type: "category",
            data: ["1年以下", "1-3年", "3-5年", "5-10年", "10年以上"],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [50, 150, 110, 80, 30],
                type: "bar",
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                },
            },
        ],
    });
};

// 获取统计数据
const getStatData = () => {
    // 模拟数据获取
    totalResumes.value = 2847;
    pendingResumes.value = 1048;
    interviewResumes.value = 580;
    rejectedResumes.value = 484;
};

// 窗口大小变化时重绘图表
const handleResize = () => {
    for (const key in charts.value) {
        if (charts.value[key]) {
            charts.value[key].resize();
        }
    }
};

onMounted(() => {
    getStatData();
    initCharts();
    window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
    // 销毁图表实例
    for (const key in charts.value) {
        if (charts.value[key]) {
            charts.value[key].dispose();
        }
    }
});
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.card-content {
    padding: 20px;
    text-align: center;
}

.card-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.chart-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.chart-card {
    height: 400px;
}

.chart-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.chart-container {
    width: 100%;
    height: 350px;
}
</style>
